<template>
  <div class="question-list">
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchForm">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="题型" label-width="80px" class="full-width-item">
                  <el-select v-model="searchForm.type" placeholder="请选择题型" clearable>
                    <el-option label="单选题" value="1"></el-option>
                    <el-option label="多选题" value="2"></el-option>
                    <el-option label="判断题" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="题干" label-width="80px" class="full-width-item">
                  <el-input v-model="searchForm.content" placeholder="请输入题干" clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <el-form-item label="试题等级" label-width="80px" class="full-width-item">
                  <el-select v-model="searchForm.level" placeholder="请选择等级" clearable>
                    <el-option label="必考" value="1"></el-option>
                    <el-option label="选考" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button icon="el-icon-refresh" class="overPosBtn" @click="handleRefresh">重 置</el-button>
          <el-button type="primary" @click="handleSearch" icon="el-icon-search" class="set-col-btn">查 询</el-button>
        </div>
      </template>
    </search-form>

    <div class="refresh-btn-container">
      <el-button icon="el-icon-refresh" circle @click="refreshData"></el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
      <el-table-column prop="type" label="题型" width="120"></el-table-column>
      <el-table-column prop="content" label="题干"></el-table-column>
      <el-table-column prop="level" label="试题等级" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" icon="el-icon-edit" class="set-table-btn">编辑</el-button>
          <el-button @click="handleDelete(scope.$index)" type="text" icon="el-icon-delete" class="set-table-btn" style="color: #D91515;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <edit-question-dialog
      :visible.sync="showEditDialog"
      :table-data="dialogTableData"
      @search="handleDialogSearch"
      @refresh="handleDialogRefresh"
      @edit="handleDialogEdit"
      @delete="handleDialogDelete"
    />
  </div>
</template>

<script>
import SearchForm from "@/components/search-form";
import EditQuestionDialog from "./editQuestionDialog.vue";

export default {
  name: 'QuestionList',
  components: {
    SearchForm,
    EditQuestionDialog
  },
  data() {
    return {
      searchForm: {
        type: '',
        content: '',
        level: ''
      },
      tableData: [
        {
          type: '单选题',
          content: '示例题干1',
          level: '必考'
        },
        {
          type: '多选题',
          content: '示例题干2',
          level: '选考'
        }
      ],
      showEditDialog: false,
      dialogTableData: [
        {
          type: '单选题',
          content: '弹窗示例题干1',
          level: '必考'
        },
        {
          type: '多选题',
          content: '弹窗示例题干2',
          level: '选考'
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
      console.log('搜索条件：', this.searchForm);
    },
    handleRefresh() {
      this.$refs.searchForm.resetFields();
    },
    refreshData() {
      // 刷新表格数据
      this.tableData = [
        {
          type: '单选题',
          content: '示例题干1',
          level: '必考'
        },
        {
          type: '多选题',
          content: '示例题干2',
          level: '选考'
        }
      ];
      this.$message({
        message: '数据已刷新',
        type: 'success'
      });
    },
    handleEdit(row) {
      this.showEditDialog = true;
    },
    handleDelete(index) {
      this.$confirm('确认删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 处理弹窗内的事件
    handleDialogSearch(searchForm) {
      console.log('弹窗搜索条件：', searchForm);
      // 实现弹窗内的搜索逻辑
    },
    handleDialogRefresh() {
      // 刷新弹窗表格数据
      this.dialogTableData = [
        {
          type: '单选题',
          content: '弹窗示例题干1',
          level: '必考'
        },
        {
          type: '多选题',
          content: '弹窗示例题干2',
          level: '选考'
        }
      ];
    },
    handleDialogEdit({ index, data }) {
      // 更新弹窗表格中的数据
      this.$set(this.dialogTableData, index, data);
      this.$message({
        type: 'success',
        message: '修改成功!'
      });
    },
    handleDialogDelete(index) {
      this.dialogTableData.splice(index, 1);
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.question-list {
  .refresh-btn-container {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;

    ::v-deep .el-button {
      height: 32px;
      line-height: 0;
      padding: 8px;
      border-color: #E2E7F5;
      color: #393939;
    }
  }
}

::v-deep .el-form {
  width: 100%;
  
  .full-width-item {
    width: 100%;
    margin-right: 0;
    
    .el-form-item__content {
      width: calc(100% - 80px);
      
      .el-select,
      .el-input {
        width: 100%;
      }
    }
  }

  .el-form-item {
    margin-bottom: 20px;
    
    .el-form-item__label {
      font-weight: 500;
      color: #393939;
    }
  }
}

::v-deep .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-color: #E2E7F5;
}

::v-deep .el-table {
  th {
    background-color: #f5f7fa;
    color: #606266;
    padding: 12px 0;
  }
  td {
    padding: 12px 0;
  }
  .el-button {
    padding: 0 8px;
    &.set-table-btn {
      margin-right: 8px;
    }
  }
}

.formRight-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  
  ::v-deep .el-button {
    height: 32px;
    line-height: 0;
    padding: 8px 15px;
    
    &.overPosBtn {
      border-color: #E2E7F5;
      color: #393939;
    }
    
    &.set-col-btn {
      background-color: #2265EE;
    }
  }
}
</style> 